
/* 普通注释  会保留到编译后的文件*/
/* .header > .navBar + .searchBar */ 

// 静默注释   只保留在SASS源文件中，编译后被省略
// 周宇是笨蛋


    $hot:#e1251b;
    $grey:#999;
    $deepgrey:#333;
    $warm:#ffcccc;
    $cool:#ccffff;
    $warn:#ffff66;
    $danger:#f00;
    $success:#66cccc;

    $font1: bolder 18px/20x "楷体";
    $font2: 18px/20px "微软雅黑";

    $centerWidth:1140px;

    $side:left;

    @function pxToRem($val){
        @return #{$val/100px}rem;
    }

    // 混合
    // @mixin  定义一个重复使用的代码段，给它起一个名字  => 是可以重用的代码块

    // 定义混合代码段  => 如何使用:  @include center
    @mixin center {
        width: $centerWidth;
        margin: 0 auto;
    }
    // 可以指定参数和缺省值
    @mixin trans($attr:all,$dur:0s,$delay:0s,$type:linear){
        -ms-transition: $attr $dur $delay $type;
        -moz-transition: $attr $dur $delay $type;
        -webkit-transition: $attr $dur $delay $type;  
        transition: $attr $dur $delay $type;              
    }

    @mixin compatible($prop,$val) {
        -ms-#{$prop}: $val;
        -moz-#{$prop}: $val;
        -webkit-#{$prop}: $val;  
        #{$prop}: $val;     
    }
// sass引入     在一个sass文件中引入另一个sass文件
    // 注意：如果sass文件只做公共文档导入，不需要编译可以在sass文件前加上前缀"_"  之后sass文件编译时会自动跳过
@import "reset.scss";

    body{
        font: $font1;
    }
    .w{
        width: $centerWidth;
        margin: 0 auto;
    }
    .header,.banner,.main,.footer{
        // 继承
        @extend .w;
    }
    .header{
        @include center();

        height: 45px;
        background-color:$warm;
        // #{} 插值语句 用于将变量和css属性名/属性值进行拼接
        border-#{$side}:3px solid $danger ;

        // 允许嵌套
        .navBar{
            float: left;
            .nav{
                background-color:$warn;
                // > 子选择器修饰符
                // + 相邻修饰符(后面一个)
                // ~ 相邻修饰符(后面所有)
                &>li{
                    float: left;
                    line-height: 45px;
                    padding: 0 69.5px;
                    position: relative;

                    // &  表示 父元素修饰符  =>  包裹他的父元素
                    &:hover{ /* li:hover  */ 
                        background-color: $deepgrey;
                        color: #fff;
                        .subNav{  /* li:hover .subNav */
                            // display: block;
                            height: 180px;
                        }
                    }
                    .subNav{
                        background-color: $grey;
                        position:absolute;
                        width: 100%;
                        left: 0;
                        text-align: center;
                        height: 0px;
                        overflow: hidden;
                        @include compatible(transition,height 0.5s )
                        // @include trans(height,0.5s);
                        // display: none;
                    }
                    a{
                        text-decoration: none;
                        color: inherit;
                    }
                }
            }
        }

        .searchBar{
            float: right;
        }
    }

    // 可以进行计算
    .slideBar{
        width: $centerWidth*5;
    }
    .app{
        width: pxToRem(750px);
    }
